<template>
  <view class="content">
    <view>
      <c-navBar
        title="教练管理"
        showAdd
        @addClick="addCoach"
        @search="search"
      ></c-navBar>
    </view>
    <view class="content-bottom-style">
      <van-empty description="暂无数据" v-if="coachList.length === 0" />
      <c-list
        v-model:loading="loading"
        v-model:error="error"
        v-model:finished="finished"
        error-text="请求失败，点击重新加载"
        @load="Loads"
      >
        <van-empty v-if="coachList.length === 0" />
        <view class="coach-card" v-for="coach in coachList" :key="coach.id">
          <view class="flex flex-a flex-sb">
            <view class="info-box">
              <view class="label" style="width: 150rpx">姓名/账号</view>
              <text class="value">{{ coach.teacher_nickname }}</text>
            </view>
            <van-switch
              v-model="coach.checked"
              @change="statusChange(coach, $event)"
              size="16px"
            />
          </view>
          <view class="info-box mt-13">
            <view class="label">手机号</view>
            <text class="value">{{ coach.teacher_phone }}</text>
          </view>
          <view class="info-box mt-13">
            <view class="label">所属店铺</view>
            <text class="value">{{ coach.school.school_name }}</text>
          </view>
          <view class="info-box mt-13">
            <view class="label">创建时间</view>
            <text class="value">{{ coach.create_time }}</text>
          </view>
          <view class="operation">
            <van-button
              @click.stop="edit(coach.teacher_id, 'preview')"
              class="customBtn"
              color="#808080"
              size="mini"
              >查看</van-button
            >
            <van-button
              class="customBtn ml-21"
              color="#4E88E6"
              size="mini"
              @click.stop="edit(coach.teacher_id)"
              >编辑</van-button
            >
            <van-button
              class="customBtn ml-21"
              color="#D43030"
              size="mini"
              @click.stop="deletecoach(coach.teacher_id)"
              >删除</van-button
            >
          </view>
        </view>
      </c-list>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
import {
  getTeacherList,
  delTeacher,
  saveTeacherState
} from "@/apis/coachManagement.js"
import { onLoad, onShow } from "@dcloudio/uni-app"
const coachList = ref([])
const finished = ref(false)
const loading = ref(false)
const error = ref(false)
const queryParams = reactive({
  search_data: "",
  page: 0,
  size: 10,
  total: 0
})
onShow(() => {
  queryParams.page = 0
  finished.value = false
  coachList.value = []
  Loads()
})
const Loads = () => {
  queryParams.page++
  getList()
}
const edit = (teacher_id, type = "add") => {
  uni.navigateTo({
    url: `/pages/coachManagement/addCoach?teacher_id=${teacher_id}&type=${type}`
  })
}
const statusChange = (coach, $event) => {
  saveTeacherState({
    teacher_id: coach.teacher_id
  }).then((res) => {
    if (res.code === 1) {
      uni.showSuccessToast("操作成功！")
      // getList()
    }
  })
}
const getList = () => {
  loading.value = true
  getTeacherList(queryParams)
    .then((res) => {
      if (res.code === 1) {
        queryParams.total = res.data.total
        queryParams.page = res.data.current_page
        coachList.value = coachList.value.concat(res.data.data)
        coachList.value = coachList.value.map((item) => {
          return {
            ...item,
            checked: item.teacher_state === 1
          }
        })
        if (coachList.value.length === res.data.total) {
          finished.value = true
        }
        loading.value = false
      } else {
        error.value = true
        loading.value = false
        pramas.page--
      }
    })
    .catch((err) => {
      error.value = true
      loading.value = false
      pramas.page--
    })
}
const search = (value) => {
  queryParams.search_data = value
  queryParams.page = 0
  coachList.value = []
  Loads()
}
const deletecoach = (id) => {
  uni.showModal({
    title: "提示",
    content: "确认删除该教练信息吗？",
    success: function (res) {
      if (res.confirm) {
        confirmDel(id)
        console.log("用户点击确定")
      } else if (res.cancel) {
        console.log("用户点击取消")
      }
    }
  })
}
const confirmDel = (id) => {
  delTeacher({ teacher_id: id }).then((res) => {
    uni.showSuccessToast("删除成功！")

    queryParams.page = 0
    finished.value = false
    coachList.value = []
    Loads()
  })
}
const addCoach = () => {
  uni.navigateTo({
    url: "/pages/coachManagement/addCoach"
  })
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.content-bottom-style {
  width: 100%;
  flex: 1;
  overflow: hidden;
}
// .coach-list-container {
//   padding: 32rpx 22rpx;

// }
.coach-card {
  margin: 0 auto;
  border: 1px solid;
  border: 0.5px solid rgba(204, 204, 204, 1);
  border-radius: 5px;
  padding: 21px 9px 12px 20px;
  margin-bottom: 20rpx;
  width: 670rpx;

  .mt-13 {
    margin-top: 26rpx;
  }
  .info-box {
    font-size: 16px;
    display: flex;
    align-items: center;
    .label {
      color: rgba(51, 51, 51, 1);
      width: 136rpx;
    }
    .value {
      color: rgba(102, 102, 102, 1);
      margin-left: 50rpx;
    }
  }
}
.operation {
  margin-top: 20rpx;
  border-top: 1px solid rgba(204, 204, 204, 1);
  padding-top: 28rpx;
  text-align: right;
  .ml-21 {
    margin-left: 42rpx;
  }
}
</style>
